<!--{template common/container/pc/header_start}-->
<link rel="stylesheet" href="static/scss/default/index.css?{VERHASH}">
<script type="text/javascript" src="static/vue_components/screen/index.js?{VERHASH}"></script>
<script type="text/javascript" src="static/vue_components/ImageLayout/index.js?{VERHASH}"></script>
<link rel="stylesheet" type="text/css" href="static/scss/layout.css?{VERHASH}"/>
<script type="text/javascript" src="static/vue_components/HeaderSort/index.js?{VERHASH}"></script>

<script type="text/javascript" src="static/vue_components/collectdialog/index.js?{VERHASH}"></script>
<script type="text/javascript" src="static/vue_components/screendir/index.js?{VERHASH}"></script>
<style>
	.dzz-affix .el-affix--fixed {
		transition: all var(--el-transition-duration);
	}
	.dzz-affix .el-affix--fixed {
		background: var(--el-bg-color-page);
	}
</style>
<script>
	function debounce(fun, delay) {
		var time;
		return function(args) {
			var that = this;
			var _args = args;
			if (time) clearTimeout(time);
			time = setTimeout(function() {
				fun.call(that, _args)
			}, delay)
		}
	};
</script>


<!--{template common/container/pc/header_end}-->
<div id="dzzoffice">
	<el-container class="page-main">
		<el-header class="page-header" v-if="ispc"  height="auto" style="border-bottom: var(--el-border);padding: 0 10px;align-items: flex-start;">
			<!--{template view/pc/components/header}-->
        </el-header>
		
		<el-container class="page-main is-vertical">
			<!--{template view/pc/components/screen}-->
			
			<el-main class="dzz-container" style="padding: 0px;overflow: hidden;position: relative;">
				<el-scrollbar 
					id="main_scrollbar" 
					ref="MainscrollbarRef" 
					@scroll="HandleElScrollbar">

					<template v-if="!ispc">
						<el-affix 
							class="dzz-affix" 
							target="#main_scrollbar>.el-scrollbar__wrap" 
							:offset="ispc?60:rollingdire=='down'?-90:0">
							<div v-if="!ispc" style="padding: 8px 4px;padding-bottom: 0; display: flex;">
								<el-input v-model="fheaderkeyword" prefix-icon="Search" @change="headerkeywordInput" type="search" placeholder="搜索" clearable ></el-input>
								<el-popover
									placement="bottom"
									trigger="click"
									popper-class="isdropdown header-dropdown-menu">
									<comsort
										:iscolumn="false"
										:defaultval="HeaderRightBtnShow"
										@change="HeaderShowChange">
									</comsort>
									<template #reference>
										<div style="margin-left: 12px;">
											<el-button icon="Sort"></el-button>
										</div>
									</template>
								</el-popover>
							</div>
							<el-header height="50px" style="padding: 0px;padding-bottom: 4px;">
								<dzz-screen
									ref="ScreenBoxRef"
									:resize="DocumentResize"
									:props="ScreenProps"
									:headerkeyword="HeaderKeyword"
									:defaultparam="ScreenParam"
									@submit="CommonGetImageData"
									@visible="screenvisible">
								</dzz-screen>
							</el-header>
						</el-affix>
					</template>
					


					<div v-if="screenType.show && screenType.type && ispc" v-show="Screenshow" style="padding: 10px 0;">
						<div style="border-radius: 8px;background: var(--el-bg-color);border: var(--el-border);">
							<dzz-screendir
								ref="ScreenBoxRef"
								:resize="DocumentResize"
								:props="ScreenProps"
								:headerkeyword="HeaderKeyword"
								:defaultparam="ScreenParam"
								:appid="DocumentAppid"
								@submit="CommonGetImageData">
							</dzz-screendir>
						</div>
					</div>
					
					<!--{template view/pc/components/image}-->
					<el-backtop 
						target="#main_scrollbar>.el-scrollbar__wrap" 
						:right="20" 
						:bottom="ispc?20:80" ></el-backtop>
				</el-scrollbar>
			</el-main>
		</el-container>
		<el-header v-if="!ispc" class="page-header"  height="50px" style="border:0;border-top: var(--el-border);">
			<!--{template view/pc/components/header_m}-->
        </el-header>
	</el-container>
	
	<!--{template view/pc/components/common}-->
	<div v-if="DocumentOverlay" class="el-overlay" style="z-index: 1001;background: transparent;"></div>
</div>
<script>
	const { createApp, reactive, toRefs, toRef, ref, onMounted, nextTick, watch,defineAsyncComponent, onBeforeUpdate } = Vue;
	const dzzoffice = Vue.createApp({
		data(){
			return {
				bannerData:{
					data:[],
					active:null,
					title:''
				},
				DocumentAppid:'',
				DocumentThemeColor:'',
				scrollref:'',
				DocumentResize:0,
				ispc:true,
				rollingdire:'up',
				beforeScrollTop:0
			}
		},
		
		created(){
			
			//主题颜色
			let theme = localStorage.getItem('theme');
			if(theme){
				this.DocumentThemeColor=theme;
			}else{
				this.DocumentThemeColor = 'light'
			}
			
			let data = '$templatedata';
			if(!data){
				return false;
			}
			data = JSON.parse(data);
			for (const key in data) {
				const element = data[key];
				this.bannerData.data.push(element);
			}
			this.handleIsPc();
			let DocumentAppid = this.CommonGetHashParam('id',location.hash);
			if(DocumentAppid){
				this.DocumentAppid = DocumentAppid;
				let keyword = this.CommonGetHashParam('keyword');
				if(keyword){
					this.headerkeyword = decodeURI(keyword);
					this.fheaderkeyword = decodeURI(keyword);
				}
			}else{
				let keyword = this.CommonGetHashParam('keyword',location.hash);
				if(keyword){
					this.headerkeyword = decodeURI(keyword);
					this.fheaderkeyword = decodeURI(keyword);
				}
				if(this.bannerData.data.length){
					this.DocumentAppid = this.bannerData.data[0].tid;
				}
			}
			this.CommonInit();
		},
		mixins:[CommonMixin,HeaderMixins,ScreenMixin,MixinImage],
		watch:{
			DocumentThemeColor:{
				handler(newval){
					document.querySelector('html').className = newval
				},
				deep:true,
				// immediate:true
			},
			DocumentAppid:{
				handler(val){
					if(val){
						let self = this;
						let curr = this.bannerData.data.find(function(current){
							return current.tid == val;
						});
						if(curr){
							this.bannerData.title = curr.title;
						}
						this.bannerData.active = val;
						this.ScreenParam.sid = val;
						this.CommonInit();
					}
				},
				deep:true,
				immediate: true
			},
		},
		
		methods:{
			HandleElScrollbar(data){
				let self = this;
				let topValue = 0;// 上次滚动条到顶部的距离  
				self.$refs.RefImageLayout.HandleElScrollbar();
				if(!this.ispc){
                    topValue = data.scrollTop; 
                    let afterScrollTop = data.scrollTop;
                    let updown = afterScrollTop - this.beforeScrollTop;
                    if(afterScrollTop == 0){
                        this.rollingdire = 'up';
                        return false; 
                    }
                    if( updown === 0 ) {
                        return false;
                    }            
                    this.beforeScrollTop = afterScrollTop;
                    this.rollingdire = updown > 0 ? "down" : "up";  //判断往上还是往下
                }
			},
			handleIsPc(){
                let innerWidth = window.innerWidth;
                if(innerWidth > 768){
                    this.ispc = true;
                }else{
                    this.ispc = false;
                }
            },
			clearkeyword(){
                this.headerkeyword = '';
                this.fheaderkeyword = '';
			},
			DocumentThemeChange(){
				if(this.DocumentThemeColor=='light'){
					this.DocumentThemeColor='dark';
					localStorage.setItem('theme','dark');
				}else{
					this.DocumentThemeColor='light';
					localStorage.setItem('theme','light');
				}
				
			}
		},
		components: {
			comavatar,
			comsort
		},
		mounted(){
			var self = this;
			dzzoffice.WindowThis = this;
			self.scrollref = self.$refs.MainscrollbarRef;
			window.onresize = function(){
				self.DocumentResize += 1;
				self.handleIsPc();
			};
		}
	});
	dzzoffice.use(DzzScreen);
	dzzoffice.use(DzzScreendir);
	dzzoffice.component('comsort', comsort);
	dzzoffice.use(ImageLayout);
	dzzoffice.use(DzzCollectdialog);
	dzzoffice.use(ElementPlus, {
		locale: ElementPlusLocaleZhCn,
	});
	for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
		dzzoffice.component(key, component)
	}
	// 屏蔽警告信息
	dzzoffice.config.warnHandler = function(){return null};
	dzzoffice.mount('#dzzoffice');
</script>

<!--{template common/container/pc/footer}-->
